<template>
     <div style="100%; overflow: hidden;">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                >新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate"
                >修改</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                >删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport"
                >导出发图单</el-button>
              </el-col>
            </el-row>

            <el-table v-loading="loading" border :data="orderitemsList" @selection-change="handleSelectionChange" style="width: 100%;">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="区域名称" prop="fareaname" />
                <el-table-column label="数据类型" align="center"   prop="fdatatype" width="180"/>
                <el-table-column label="覆盖面积（平方千米）" align="center"   prop="fcoveragerange" width="180"/>
                  <el-table-column label="数量（个）" align="center" prop="fqty" width="180"/>
                <el-table-column label="数据量（MB）" align="center" prop="fdatasize" width="180"/>
                <el-table-column label="密级" align="center"   prop="fsecretgrade" width="180"/>
                  <el-table-column label="备考" align="center" prop="fmemo" width="180"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                          >修改</el-button>
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                          >删除</el-button>
                        </template>
                      </el-table-column>
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
            <!-- 添加或修改测试样例对话框 -->
                <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body :close-on-click-modal="false">
                  <el-form ref="form" :model="form" :rules="rules" label-width="150px">

                      <el-form-item label="区域名称" prop="fareaname">
                        <el-input v-model="form.fareaname" placeholder="请输入区域名称" />
                      </el-form-item>
                      <el-form-item label="数据类型" prop="fdatatype">
                        <el-select v-model="form.fdatatype" placeholder="请选择数据类型" style="width:100%">
                                                                                                              <el-option
                                                                                                                v-for="dict in fdatatypeOption"
                                                                                                                :key="dict.fdatatype_value"
                                                                                                                :label="dict.fdatatype_text"
                                                                                                                :value="dict.fdatatype_value"
                                                                                                              ></el-option>
                                                                                                 </el-select>
                      </el-form-item>

                       <el-form-item label="覆盖面积（平方千米）" prop="fcoveragerange">
                                            <el-input v-model="form.fcoveragerange" placeholder="请输入覆盖面积（平方千米）" />
                         </el-form-item>
                           <el-form-item label="数量（个）" prop="fqty">
                                                         <el-input v-model="form.fqty" placeholder="请输入数据（个）" />
                                                  </el-form-item>
                          <el-form-item label="数据量（MB）" prop="fdatasize">
                                <el-input v-model="form.fdatasize" placeholder="请输入数据量（MB）" />
                         </el-form-item>
                               <el-form-item label="密级" prop="fsecretgrade">
          <el-select
            v-model="form.fsecretgrade"
            placeholder="请选择密级"
            style="width: 100%"
          >
            <el-option
              v-for="dict in fsecretGradeOption"
              :key="dict.fcode"
              :label="dict.fcontent"
              :value="dict.fcode"
            ></el-option>
          </el-select>
                                                         </el-form-item>
                               <el-form-item label="备考" prop="fmemo">
                                                        <el-input v-model="form.fmemo" placeholder="请输入备考" />
                                                         </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                  </div>
                </el-dialog>
     </div>
</template>
<script>
  import { guid } from "@/api/materi/materi";
  import { listOrderitems, getOrderitems, delOrderitems, addOrderitems, updateOrderitems } from "@/api/orderitems/orderitems";

  export default {
    name: "jiami",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 测试样例表格数据
        orderitemsList: [],
        // 日期范围
        dateRange: [],
         //数据类型
        fdatatypeOption: [{fdatatype_value:"空三加密",fdatatype_text:"空三加密"},{fdatatype_value:"ADS",fdatatype_text:"ADS"}],
      fsecretGradeOption: [
        { fcode: "公开", fcontent: "公开" },
        { fcode: "内部", fcontent: "内部" },
        { fcode: "秘密", fcontent: "秘密" },
        { fcode: "机密", fcontent: "机密" },
        { fcode: "绝密", fcontent: "绝密" }
      ],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //编辑模式
        updateMode: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          code: undefined,
          desc: undefined,
          createtime: undefined,
          fissuedtype: "加密成果",
          fissuedtypeid: "加密成果",
          fmainguid: ""
        },
        mainApplyDoc: undefined,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {

    },
    methods: {
      /** 根据父id查询分发明细列表 */
      getOrderList(mainApplyDoc){
        console.log("开始加密成果订单明细列表,mainId:"+mainApplyDoc.fguid);
        this.queryParams.fmainguid=mainApplyDoc.fguid;
        this.mainApplyDoc = mainApplyDoc;
        this.getList();
      },
      getList() {
        console.log("触发getList()");
        this.loading = true;
        listOrderitems(this.queryParams).then(response => {
          this.orderitemsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          fguid: undefined,
          fareaname: undefined,
          fdatatype: undefined,
          fcoveragerange: undefined,
          fqty: undefined,
          fdatasize: undefined,
          fuse: undefined,
          fpurpose: undefined,
          fsecretgrade: undefined,
          fmemo: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.fguid)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.fguid = guid();
        this.updateMode = "Add";
        this.form.fmainguid = this.queryParams.fmainguid;
        this.form.fissuedtype = this.queryParams.fissuedtype;
        this.form.fissuedtypeid = this.queryParams.fissuedtypeid;
        this.open = true;
        this.title = "添加加密成果明细";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.fguid || this.ids
        this.updateMode = "Update";
        console.log("id:"+id);
        getOrderitems(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改加密成果明细";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        var updateMode = this.updateMode
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (updateMode == "Update") {
              updateOrderitems(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addOrderitems(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.fguid || this.ids;
        this.$confirm('是否确认删除当前数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delOrderitems(ids);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function() {});
      },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    setOrderItemRowMerge(mergeArr,mergeCellInfo,rowNum){
        var startCol = 0;
        for (var i = 0; i < mergeCellInfo.length; i++) {
          var merges_cell = {
            //订单明细合并单元格
            s: {
              //s为开始
              c: startCol, //开始列
              r: rowNum, //开始取值范围
            },
            e: {
              //e结束
              c: (startCol + mergeCellInfo[i]-1), //结束列
              r: rowNum, //结束范围
            },
          };
          startCol = startCol + mergeCellInfo[i];
          mergeArr.push(merges_cell);
        }
    },
    /** 导出按钮操作 */
    handleExport() {
      //const tHeader = name
      var filterVal = [
        "fareaname",
        "fdatatype",
        "fcoveragerange",
        "fqty",
        "fdatasize",
        "fuse",
        "fpurpose",
        "fsecretgrade",
        "fmemo"
      ];
      console.log(filterVal);
      // common.export2Excel(name,tHeader,filterVal,this.tableData0_0)
      require.ensure([], () => {
        const {
          export_json_to_excel,
          getFTDMainInfo,
        } = require("@/views/orderitems/export/ExportFTD");
        //const tHeader = theader;
        let tHeader = [name, "", "", "", "", "", "", "", "", "", ""];
        const list = this.tableData1_0;
        const data = getFTDMainInfo(this.mainApplyDoc);

        data.push([
          "数据类型",
          "",
          "",
          "",
          "加密成果",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
        ]);
        var orderItemsCaptionRow = [
          "区域名称",
          "数据类型",
          "覆盖面积\n（平方千米）",
          "数量\n（个）",
          "数据量\n（MB）",
          "项目来源",
          "使用目的",
          "密级",
          "备考",
        ];

        var merges_arr = [3, 3, 3, 2, 2, 3, 3, 2, 3];

        orderItemsCaptionRow = this.getOrderItemsCaptionRow(
          orderItemsCaptionRow,
          merges_arr
        );
        filterVal = this.getOrderItemsCaptionRow(filterVal, merges_arr);

        data.push(orderItemsCaptionRow);

        var orderitems_merges = [];
        var startRows = 8;
        this.setOrderItemRowMerge(orderitems_merges, merges_arr, startRows);
        startRows++;
        for (var i = 0; i < this.orderitemsList.length; i++) {
          const data_orderitems = this.formatJson(filterVal, [
            this.orderitemsList[i],
          ]);
          data.push(data_orderitems[0]);
          this.setOrderItemRowMerge(orderitems_merges, merges_arr, startRows);
          startRows++;
        }
        console.log(data);
        export_json_to_excel(
          tHeader,
          data,
          name,
          orderitems_merges,
          this.mainApplyDoc
        );
      });
    },
    getOrderItemsCaptionRow(orderItemsCaptionRow, merges_arr) {
      var startCol = 0;
      var rowCols = [];
      for (var i = 0; i < merges_arr.length; i++) {
        for (var j = 0; j < merges_arr[i]; j++) {
          if (j == 0) {
            rowCols.push(orderItemsCaptionRow[i]);
          } else {
            rowCols.push("");
          }
        }
      }
      return rowCols;
    },
    }
  };
</script>
